import { FC, useRef, useEffect } from "react";
import {
  Typography,
  DatePicker,
  Select,
  Input,
  Button,
  Affix,
  Segmented,
  Layout,
  ColorPicker,
  Form,
  Menu,
  Space,
  Checkbox,
  Divider,
} from "@supcon/supcon-5t-design";
import { DeleteOutlined } from "@ant-design/icons";
import { CommonPage } from "@/components";
import {
  useModel,
  qiankunStateFromMasterModelNamespace,
} from "@supcon/supcon-microapp";
import { useAuth } from "@supcon/supcon-5t-auth";
import type { AffixRef } from "@supcon/supcon-5t-design/dist/es/components/affix";
import "./index.module.less";
const { RangePicker } = DatePicker;

const IndexPage: FC = () => {
  const qiankunProps: any = useModel(qiankunStateFromMasterModelNamespace);
  const inputRef = useRef<any>(null);
  const inputRef1 = useRef<any>(null);
  const tableRef = useRef<AffixRef | null>(null);
  const [form] = Form.useForm();
  const formRef = useRef<any>(null);
  const { flagMap } = useAuth(["add", "delete"]);
  useEffect(() => {
    console.log("qiankunProps", qiankunProps);
  }, []);
  return (
    <CommonPage className="index_page">
      <CommonPage.Header>
        <div>首页</div>
      </CommonPage.Header>
      <CommonPage.Content>
        <Divider>qiankun示例</Divider>
        <Button
          type="primary"
          onClick={() => {
            if (qiankunProps.openTab) qiankunProps.openTab("/tpt-cnpc/table");
          }}
        >
          qiankun子应用控制tab
        </Button>
        <Divider>supcon-5t-auth</Divider>
        <Button disabled={flagMap["add"] !== "show"}>新增</Button>
        <Button disabled={flagMap["delete"] !== "show"}>删除</Button>
        <Divider>supcon-5t-design示例</Divider>
        <Typography>
          <DatePicker
            showTime={{
              format: "YYYY-MM-DD HH:mm:ss",
            }}
          ></DatePicker>
          <RangePicker showTime></RangePicker>
          <Select></Select>
          <Form form={form} ref={formRef}>
            <Form.Item>
              <Input maxLength={10} ref={inputRef}></Input>
            </Form.Item>
            <Form.Item>
              <Input.TextArea maxLength={20} ref={inputRef1}></Input.TextArea>
            </Form.Item>
          </Form>
          <Affix ref={tableRef}>
            <Button type="primary" icon={<DeleteOutlined />}>
              Affix top
            </Button>
          </Affix>
          <Menu></Menu>
        </Typography>
        <Segmented style={{}} options={[]} onChange={() => {}}></Segmented>
        <DeleteOutlined />
        <ColorPicker></ColorPicker>
        <Layout>
          <Layout.Header></Layout.Header>
        </Layout>
        <Space direction="vertical">
          <div>
            <Checkbox>A</Checkbox>
            <Checkbox defaultChecked={false} disabled>
              B
            </Checkbox>
            <Checkbox defaultChecked disabled>
              C
            </Checkbox>
          </div>
          <div>
            <Checkbox.Group disabled>
              <Checkbox>A</Checkbox>
              <Checkbox defaultChecked={false}>B</Checkbox>
              <Checkbox defaultChecked>C</Checkbox>
            </Checkbox.Group>
          </div>
        </Space>
      </CommonPage.Content>
      <CommonPage.Footer></CommonPage.Footer>
    </CommonPage>
  );
};

export default IndexPage;
